<template>
  <div>
    <el-alert
      title="消息提示的文案"
      type="info"
      center
      show-icon>
    </el-alert>
    <!-- 搜索 -->
      <div class="search">
        <div>
          <input type="text" v-model="search" >
          <button class="search_icon" @click="searchfun()">搜索</button>
        </div>
      </div>
      <!-- 广告 -->
      <div class="ad">
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="(item ,index) in imgUrl" :key="index">
            <div>
              <div class="describe">{{ item.message }}</div>
              <img :src="item.url" alt="">
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 推荐 -->
      <div class="details">
        <p>————推荐————</p>
        <div class="Box">
         <recommend ref=""></recommend>
        </div>
      </div>
       <div class="details">
        <p>————猜你喜欢————</p>
        <div class="Box">
           <you-like></you-like>
        </div>
      </div>
       <div class="details">
        <p>————商品————</p>
        <div class="Box">
          <goods-show></goods-show>
        </div>
      </div>
       <div class="details a">
        <p class="a"></p>
        <div class="Box">
          <web-infor></web-infor>
        </div>
      </div>
  </div>
</template>

<script>
import WebInfor from '../../components/Goods/WebInfor.vue'
import GoodsShow from '../../components/Goods/GoodsShow.vue'
import Recommend from '../../components/Goods/Recommend.vue'
import YouLike from '../../components/Goods/YouLike.vue'

export default {
  components: { YouLike, Recommend, GoodsShow, WebInfor },
  data () {
    return {
      search: '',
      imgUrl: [
        { url: 'https://t7.baidu.com/it/u=3258770622,2359714340&fm=193&f=GIF', message: '好看' },
        { url: 'https://t7.baidu.com/it/u=2040182115,3142469309&fm=193&f=GIF', message: '不错' },
        { url: 'https://t7.baidu.com/it/u=2515140172,193092332&fm=193&f=GIF', message: '便宜' },
        { url: 'https://t7.baidu.com/it/u=339419609,2900803326&fm=193&f=GIF', message: '实惠' },
        { url: 'https://t7.baidu.com/it/u=3639848191,234498427&fm=193&f=GIF', message: '奢侈' },
        { url: 'https://t7.baidu.com/it/u=60500619,3131222819&fm=193&f=GIF', message: '美妙' }
      ]
    }
  },
  methods: {
    searchfun () {
      // console.log('搜索')
      this.$router.push({ name: 'selectgoods', params: { key: this.search } })
    },
    prompt () {
      if (sessionStorage.getItem('token') === null) {
        confirm('你还未登录!')
      }
    }
  },
  mounted () {
    setTimeout(this.prompt(), 50000)
  }
}
</script>
<style lang="less" scoped>

.search{
  width: 100%;
  height: 120px;
  // background-color: darkgoldenrod;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  input{
    padding: 0 20px;
    width: 40vw;
    height: 40px;
    border-radius: 20px;
    border: 0px;
    margin: auto;
  }
  .search_icon{
    display: inline-block;
    border-radius:  20px;
    background-color: rgba(206, 196, 171, 0.639);
    border: 0px;
    width: 80px;
    height: 40px;
    position:relative;
    left:-77px;
  }
}
.ad{
  .el-carousel__item {
    .describe{
    opacity: 0.75;
    width: 100%;
    height: 20px;
    background-color: rgba(185, 186, 111, 0.541);
    position: absolute;
    bottom: 20px;
    }
    img{
      max-width: 100%;
      max-height: 100%;
    }
  }
}
.details{
  p{
    margin: 20px 0;
    font-size: 24px;
    display: flex;
    justify-content: center;
  }
  .Box{
    width: 90vw;
    margin: auto;
    // height: 400px;
    // background-color: antiquewhite;
  }
  .a{
    height: auto;
    border-top: 1px solid rgba(169, 169, 169, 0.255);
    margin-top: 40px;
  }
}
</style>
